<template>
  <div class="elm-edit">
    <elm-page-bb>
      <el-form ref="model" :model="model" size="small" label-width="110px">
        <elm-row>
          <el-form-item label="车牌号" prop="license_plate" :rules="[{ required: true, message: '必须填写'}]">
            <el-input v-model="model.license_plate"></el-input>
          </el-form-item>
          <el-form-item label="车辆品牌" prop="brand">
            <el-input v-model="model.brand"></el-input>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="车辆型号" prop="model">
            <el-input v-model="model.model"></el-input>
          </el-form-item>
          <el-form-item label="车辆类型" prop="vehicle_type" >
            <elm-code dict_type="tms_car_vt" v-model="model.vehicle_type"></elm-code>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="车辆颜色" prop="color">
            <el-input v-model="model.color"></el-input>
          </el-form-item>
          <el-form-item label="识别码" prop="vin">
            <el-input v-model="model.vin"></el-input>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="车辆状态" prop="vehicle_status">
            <elm-code dict_type="tms_car_vs" v-model="model.vehicle_status"></elm-code>
          </el-form-item>
          <el-form-item label="年检日期" prop="annual_inspection_date">
            <el-date-picker v-model="model.annual_inspection_date" type="date" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="购车日期" prop="purchase_date">
            <el-date-picker v-model="model.purchase_date" type="date" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="购买费用" prop="purchase_cost" :rules="[{trigger: 'blur' ,validator: validateNumber}]">
            <el-input v-model="model.purchase_cost">
              <template slot="append"><div style="width: 25px;text-align: center;">万元</div></template>
            </el-input>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="发动机号" prop="engine_number">
            <el-input v-model="model.engine_number"></el-input>
          </el-form-item>
          <el-form-item label="发动机排量" prop="engine_displacement" :rules="[{trigger: 'blur' ,validator: validateNumber}]">
            <el-input v-model="model.engine_displacement">
              <template slot="append"><div style="width: 25px;text-align: center;">升</div></template>
            </el-input>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="保险起始日期" prop="insurance_start_date">
            <el-date-picker v-model="model.insurance_start_date" type="date" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="保险到期日期" prop="insurance_end_date">
            <el-date-picker v-model="model.insurance_end_date" type="date" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="保险金额" prop="insurance_amount" :rules="[{trigger: 'blur' ,validator: validateNumber}]">
            <el-input v-model="model.insurance_amount">
              <template slot="append"><div style="width: 25px;text-align: center;">元</div></template>
            </el-input>
          </el-form-item>
          <el-form-item label="报废日期" prop="scrap_date">
            <el-date-picker v-model="model.scrap_date" type="date" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
          </el-form-item>
        </elm-row>
        <elm-row>
          <el-form-item label="所属部门" prop="department">
            <elm-org v-model="model.department"></elm-org>
          </el-form-item>
          <el-form-item></el-form-item>
        </elm-row>
      </el-form>
      <template #bottom>
        <el-button type="success" size="small" @click="submit">立即保存</el-button>
        <el-button size="small" @click="close">取消</el-button>
      </template>
    </elm-page-bb>
  </div>
</template>

<script>
export default {
  extends: elmVueBase,
  data() {
    return {
      model: {id: elm.newGuid()},
    }
  },
  async created() {
  },
  destroyed() {
    this.request.callVue.tablebinding();
  },
  methods: {

    async submit() {
      await this.$refs["model"].validate();
      var res = await elm.post('/business/tms/car/Upsert', this.model);
      if (res == true) {
        this.v('保存成功。')
        this.close();
        this.request.callVue.tablebinding();
      }
      else {
        this.error('保存失败，请稍后尝试。');
      }
    },
  }
}
</script>